@import "../../style/slagCar/pubLayout";

.g-main{
  height: 0;
  display: flex;
  flex-direction: column;
  >.tab_wrap {
    position: relative;
    display: flex;
    align-items: center;
    height: 64rpx;
    background: #ffffff;

    >.tab {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      color: gray;

      &.active {
        color: #01C257;
      }
    }

    >.bar {
      position: absolute;
      left: 25%;
      bottom: 0;
      transform: translateX(-50%);
      transition: all 0.3s;
      width: 3em;
      height: 6rpx;
      background: #01C257;

      &.half {
        left: 75%;
      }
    }
  }

  >.content-wrap {
    height: 0;
    flex: 1;
    overflow: hidden;
    > .tab_content {
      flex: 1;
      display: flex;
      height: 100%;
      width: 200%;
      overflow-y: auto;
      transition: all 0.3s;
      transform: translateX(0%);

      &.half {
        transform: translateX(-50%);
      }

      > .content_wrap {
        width: 100vw;
        display: flex;
        flex-direction: column;

        > .filter-wrap {
          display: flex;
          justify-content: space-around;
          background: #ffffff;
          padding: 20rpx 0;
          > .filter-btn {
            padding: 10rpx 20rpx;
            border: 1px solid #e6e6e6;
            background: #ffffff;
            width: 16%;
            text-align: center;
            border-radius: 8rpx;
            &.active {
              color: #01C257;
              border-color: #01C257;
            }
          }
        }

        > .total-wrap {
          padding: 10rpx;
          background: #ffffff;
          margin: 20rpx 0;
          font-size: 32rpx;
        }

        > .list-wrap {
          flex: 1;
          height: 0;
          overflow: auto;
          .li-wrap {
            //border-bottom: 1px solid #e6e6e6;
            padding: 0 16rpx;
            display: flex;
            align-items: center;
            .item {
              width: 100%;
              margin-bottom: 20rpx;
              background: #FFFFFF;
              border-radius: 8rpx;
              padding: 10rpx;
              overflow: hidden;
            }
            .title {
              font-size: 34rpx;
              font-weight: bold;
              margin-bottom: 10rpx;
            }
            .sub-title {
              color: #999999;
              font-size: 29rpx;
            }
            .trd-title {
              color: #ff9841;
              font-size: 31rpx;
              margin: 12rpx 0 8rpx;
            }
            .flex {
              display: flex;
              justify-content: space-between;
            }

            .li {
              display: flex;
              margin-bottom: 10rpx;
              .li-label {
                width: 160rpx;
                flex-shrink: 0;
              }
              .li-value {
                flex: 1;
                overflow: auto;
                .img{
                  width: 88rpx;
                  height: 88rpx;
                  margin: 0 10rpx 10rpx 0;
                }
              }
            }
          }
        }

        > .query-wrap {
          display: flex;
          align-items: center;
          padding: 20rpx;
          background: #ffffff;
          .ipt {
            border: 1px solid #e6e6e6;
            background: #ffffff;
            width: 38%;
            text-align: center;
            border-radius: 8rpx;
            height: 64rpx;
            > input {
              height: 100%;
            }
          }
          .btn {
            color: #ffffff;
            background: #01C257;
            width: 100rpx;
            border-radius: 8rpx;
            text-align: center;
            height: 60rpx;
            line-height: 60rpx;
            margin-left: 20rpx;
            &:active {
              background: rgba(1, 194, 87, 0.71);
            }
          }
        }

        .collapse-content {
          padding: 0;
        }
        .collapse-content-item {
          padding: 20rpx 40rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }
    }
  }
}
